<script setup lang="ts">
import More from '@/components/More/index.vue'
import Content from '@/components/Content/index.vue'
import ContentTitle from '@/components/ContentTitle/index.vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import APIWallet from '@/api/wallet'
import SelfPagination from '@/components/SelfPagination/index.vue'

const $router = useRouter()
const swithActive = shallowRef<1 | 2>(1)
const list = ref([])
const walletNumber = shallowRef<number>(0)

function getWallet() {
    APIWallet.getWallet().then(({ data }) => {
        walletNumber.value = data.Wallet
    })
} getWallet()

function handleJumpTopup() {
    $router.push({
        name: 'Topup'
    })
}


const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})

const total = shallowRef<number>(0)

const loading = shallowRef<boolean>(false)

function getPayList() {
    loading.value = true
    APIWallet.getPayList(queryParams.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

function getRechargelist() {
    loading.value = true
    APIWallet.getRechargelist(queryParams.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

watch(swithActive, (newValue) => {
    queryParams.value = {
        page: 1,
        limit: 8
    }
    if (newValue == 1) {
        getPayList()
    } else if (newValue == 2) {
        getRechargelist()
    }
}, { immediate: true })


function handleJumpInvoice() {
    $router.push({
        name: 'Invoice'
    })

}
</script>

<template>
    <div class="wallet">
        <Content class="content">
            <ContentTitle title="钱包" content="1、钱包里的钱，用作产品购买；<br />2、充值可以用来增加钱包里面的金额，请理性充值；" />
            <div class="item-1">
                <div>
                    <p>{{ walletNumber }}</p>
                    <p>可用金额</p>
                </div>
                <button @click="handleJumpTopup">充值</button>
            </div>
        </Content>
        <Content class="content">
            <div class="title">
                <div class="left">
                    <div class="switch" :class="{ 'swith-active': swithActive == 1 }" @click="swithActive = 1">
                        <h2>支出明细</h2>
                    </div>
                    <div class="switch" :class="{ 'swith-active': swithActive == 2 }" @click="swithActive = 2">
                        <h2>充值明细</h2>
                    </div>
                    <el-popover placement="right" width="auto" trigger="hover">
                        <template #reference>
                            <el-icon color="#eeeeee" style="font-size: 20px;">
                                <QuestionFilled />
                            </el-icon>
                        </template>
                        <div class="title-content">
                            1、支出和充值明细；
                        </div>
                        <div class="title-content">
                            2、充值后需要开具发票，请前往发票心；
                        </div>
                    </el-popover>
                </div>
                <More title="前往发票中心" style="color: #3894FF" v-show="swithActive == 2" @click="handleJumpInvoice" />
            </div>
            <el-table class="list" :data="list" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                v-show="swithActive == 1" v-loading="loading">
                <el-table-column align="center" prop="order_code" label="订单编号" />
                <el-table-column align="center" prop="price" label="金额" />
                <el-table-column align="center" prop="type_name" label="类型" />
                <el-table-column align="center" prop="create_time" label="时间" />
                <el-table-column align="center" prop="remark" label="备注" />
            </el-table>
            <el-table class="list" :data="list" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                v-show="swithActive == 2" v-loading="loading">
                <el-table-column align="center" prop="order_code" label="订单编号" />
                <el-table-column align="center" prop="amount" label="金额" />
                <el-table-column align="center" prop="pay_type_name" label="充值方式" />
                <el-table-column align="center" prop="create_time" label="充值时间" />
                <el-table-column align="center" prop="status_name" label="当前状态" />
            </el-table>
            <SelfPagination style="margin-top: 50px;margin-right: 30px;" :total="total"
                v-model:current-page="queryParams.page" :page-size="queryParams.limit" @get-list="getPayList"
                v-show="swithActive == 1 && !loading" />
            <SelfPagination style="margin-top: 50px;margin-right: 30px;" :total="total"
                v-model:current-page="queryParams.page" :page-size="queryParams.limit" @get-list="getRechargelist"
                v-show="swithActive == 2 && !loading" />
        </Content>
    </div>
</template>

<style lang="scss">
.wallet {
    .list {
        .el-table__row {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }

        .cell {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }
}

.title-content {
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
}
</style>

<style lang="scss" scoped>
.wallet {


    .content {
        margin-bottom: 30px;
        position: relative;

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0 20px;

            .left {
                display: flex;
                align-items: center;
                gap: 0 20px;

                .switch {
                    display: flex;
                    align-items: center;
                    gap: 0 10px;
                    cursor: pointer;
                    font-family: 'SOURCEHANSANSCN-REGULAR';

                    h2 {
                        color: #BBBBBB;
                        font-weight: 200;
                        font-size: 20px;
                        display: flex;
                        align-items: center;

                        &::before {
                            content: '';
                            display: block;
                            width: 5px;
                            height: 16px;
                            border-radius: 5px;
                            margin-right: 6px;
                            background-color: #BBBBBB;
                        }
                    }
                }

                .swith-active {

                    h2 {
                        color: rgba(16, 16, 16, 1);
                        font-weight: 700;

                        &::before {
                            content: '';
                            background-color: rgba(249, 20, 20, 1);
                        }
                    }
                }
            }
        }

        .list {
            width: 99.99%;
            margin: 0 auto;
            margin-top: 15px;
        }

        .tabs {
            &:deep(.el-tabs__item) {
                font-size: 20px;
                font-weight: 700;
            }

            &:deep(.el-tabs__item.is-active) {
                color: #F91414;
            }

            &:deep(.el-tabs__active-bar) {
                background-color: #F91414;
            }

            &:deep(.el-tabs__item) {
                &:hover {
                    color: #F91414;

                }
            }
        }

        .item-1 {
            display: flex;
            justify-content: center;
            gap: 0 30px;
            padding-top: 30px;
            padding-bottom: 20px;

            button {
                width: 313px;
                height: 72px;
                line-height: 72px;
                border-radius: 5px;
                background-color: #F91414;
                color: #ffffff;
                font-size: 28px;
                border: none;
                cursor: pointer;
            }

            div {
                width: 673px;
                height: 177px;
                border-radius: 10px;
                background-color: rgba(238, 238, 239, 1);
                overflow: hidden;

                p {
                    text-align: center;

                    &:first-child {
                        color: #F91414;
                        font-size: 72px;
                        margin-top: 35px;
                        font-weight: 700;
                    }

                    &:last-child {
                        color: #797979;
                        font-size: 16px;
                        margin-top: 10px;
                        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
                    }
                }
            }
        }
    }
}
</style>
